<template>
  <div>
      <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
  </div>
</template>



<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      title_list:[],
      check_num_list:[],
      province:'',
    }
  },
  created(){
    this.get_check_nums()
    this.get_ip_place()
  },
  mounted(){

    window.addEventListener("beforeunload",e=>{
        this.beforeunloadHandler(e);
    });
  },
  destroyed(){
    window.removeEventListener("beforeunload", e=>{
        this.beforeunloadHandler(e);
    });
  },
  methods: {
    get_ip_place:function(){
      this.axios.get('https://restapi.amap.com/v3/ip?parameters',{params:{'key':'c8165322c2c48892f90ccda1aef617cf'}}).then(res=>{
          this.province = res.data.province.slice(0,2)
          console.log(this.province)
      })
    },
    beforeunloadHandler(e) {
        e = e || window.event;
        if(e){

            e.returnValue = "您是否确认离开此页面-您输入的数据可能不会被保存";
        }
        console.log('测试')
        this.axios.get('http://localhost:5000/cont',{params:{'number':5}}).then(res=>{
            console.log(res)
        })
        return "您是否确认离开此页面-您输入的数据可能不会被保存";
    },
    get_check_nums(){
        this.axios.get('http://localhost:5000/get_check_num/').then(res=>{
            console.log(res.data)
            for(let i =0;i<res.data.data.length;i++){
              this.title_list.push(res.data.data[i].time)
              this.check_num_list.push(res.data.data[i].check_num)
            }
            // 加载柱状显示图
            this.drawLine();
        })
    },
    // 柱状显示图
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '点击率分析'},
            tooltip: {},
            xAxis: {
                data: this.title_list
            },
            yAxis: {},
            series: [{
                name: '百分比',
                type: 'bar',
                data: this.check_num_list
            }]
        });
    }
  }
}
</script>

<style>

</style>